﻿<!doctype html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no">
    <title>登录</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <meta name="msapplication-TileColor" content="#0e90d2">
    <link rel="stylesheet" href="../../css/amazeui.css">
    <link rel="stylesheet" href="../../css/weui.css">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

    <script>
        localStorage.setItem('http', 'http://haidaiapi.test.zhikewl.com')//'')
    </script>
    <style>
        html { width: 100%;height:100%;font-size: 10px;}
        html,body { height:100%;background-color: #ffffff !important;overflow: hidden !important; }
        body { padding-bottom: 0;margin: 0; }
        * { padding: 0;margin: 0; }
        header {position: fixed;top: 0;left: 0;z-index: 999;width: 100%;height: 49px; background-color: #333; color: #fff;}
        header .back { position: absolute;top: 0;left: 0; display: inline-block;padding-left: 5px; font-size: 30px; }
        header p { margin: 0;line-height: 49px; font-size: 16px;text-align: center; }
        .register { padding: 8px 6px; font-size: 14px;}
        .res-item {position: relative;  width: 100%; margin-bottom: 8px; }
        .res-icon {position: absolute;left: 8px;top: 5px;z-index: 100; display: inline-block;font-size: 18px;color: #9c9c9c; }
        .res-item .input-item {display: inline-block;width: 100%;padding-left:5px;border: none; font-size: inherit;}
        .res-item .input-item:focus + .res-icon { color: #4b89fc; }
        .yanzhengma {position: absolute;right: 10px;top: 5px; z-index: 100;  display: inline-block;padding: 0.5rem 0.8rem;font-size: 14px; border: none;background-color: #4b89fc;color: #fff;border-radius: 8px; }
        .yanzhengma:disabled { background-color: #ddd; }
        .res-btn { margin-top: 20px;padding: 0 5px; }
        .res-btn button {  background-color: #4b89fc;font-size: 14px; color: #fff;border-radius: 8px; }
        .am-input-group{
            padding: 10px 0;
        border-bottom: 1px solid #ccc;

        }
        .am-input-group-label {
            background-color: #fff;
        border: none;
    }
    img{
        width: 25px;
        margin-right: 10px;
    }
    .am-form-field {
        border: none;
        text-align: right;
        outline: none;
        padding-right: 16px;
        background: rgba(0,0,0,0);
        text-align: right;
    }
    .am-form-field>input{
        text-align: right;
    }
        .title{
            height: 215px;
            width: 100%;
            background-image: url('../../images/loginBG.png');
            background-size:100% 100%;
            background-repeat: no-repeat;
            background-position: 0;
            position: relative;
            color:#fff;
        }
        .logo{
            position: absolute;
            top: 50%;
            transform: translate(-50%,-50%);
            left:50%;
        }
        .title>p{
            font-size: 12px;
            position: absolute;
            bottom: 0;
            padding: 10px;
            letter-spacing:3px;
            margin: 0;
        }
        .logo>div{
            font-size: 33px;
        }
        .res-btn button {
            width: 90%;
            margin: 30px auto;
            display: block;
            outline: none;
            background: #1197ff;
            border-radius: 5px;
            height: 40px;
            margin-bottom: 0;   
        }
        input{
            outline: none;
            background: rgba(0, 0, 0, 0.0)
        }
    </style>
</head>

<body>
    <div class="title">
        <div class="logo">
            <div>房贷抵押</div>
        </div>
        <p>为了保障您的账户安全,请勿向他人提供账号和密码,该手号码为注册手机号码手机号请输入手机号码</p>
    </div>
    <div class="register">
        <div class="res-item">
        </div>
        <div class="am-input-group">
            <span class="am-input-group-label"><img src="../../images/shoujihao.png">手机号</span>
            <div class="am-form-group am-form-field res-item">
                <input type="text" placeholder="手机号" value="" class="input-item mobile">
            </div>
        </div>
        <div class="am-input-group">
            <span class="am-input-group-label"><img src="../../images/mima.png">密码</span>
            <div class="am-form-group am-form-field res-item">
                <input type="passWord" placeholder="密码" value="" class="input-item mima">
            </div>
        </div>
        <div class="res-btn">
            <button type="button" id="res-btn" class="am-btn am-btn-block">登录</button>
        </div>
    </div>

    <a style="float: left;color: #ccc;font-size: 12px;padding: 0 35px" href="./zhuce.html">账号注册</a>
    <a style="float: right;color:#ccc;font-size: 12px;padding: 0 35px" href="./wangjimima.html">忘记密码</a>

    <div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">警告</div>
            <div class="am-modal-bd cont">
                ---
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn">确定</span>
            </div>
        </div>
    </div>
    <script src="../../js/jquery-3.2.1.min.js"></script>
    <script src="../../js/amazeui.js"></script>
    <script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
    <script language="JavaScript">
        history.pushState(null, null, document.URL);
        window.addEventListener('popstate', function () {
            history.pushState(null, null, document.URL);
        });

        var id = '';
        $(function () {
            id = getQueryString('id');
            $('#register').attr('href', './zhuce.html?id=' + id);
        });

        function getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }

        var http = localStorage.getItem('http')
        $('#res-btn').on('click', function () {
            $('#res-btn').attr('disabled', 'true');
            var mobile = $('.mobile').val();
            var mima = $('.mima').val();
            var repeatmima = $('.repeatmima').val();
            if (!mobile) {
                $('.mobile').focus();
                $('#res-btn').removeAttr('disabled')
                $(".cont").text('请填写手机号码')
                $('#my-alert').modal('open')
                return
            }
            if (mobile.length != 11) {
                $('.mobile').focus();
                $(".cont").text('请填写正确的手机号码')
                $('#my-alert').modal('open')
                $('#res-btn').removeAttr('disabled')
                return
            }
            if (!mima) {
                $('.mima').focus();
                $(".cont").text('请填写密码')
                $('#my-alert').modal('open')
                $('#res-btn').removeAttr('disabled')
                return
            }
            if (mima.length < 6) {
                $('.mima').focus();
                $(".cont").text('请填写不少于6位的密码')
                $('#my-alert').modal('open')
                $('#res-btn').removeAttr('disabled')
                return
            }

            $.ajax({
                type: 'GET',
                url: http + "/api/member/Login",
                async: false,
                data: {
                    "model.Phone": mobile,
                    "model.password": mima
                },
                success: function (data) {
                    console.log(JSON.stringify(data))
                    $(this).prop('disabled', true);
                    textalert(data.message)
                    if (data.type == 1) {
                        localStorage.setItem('Access_token', data.resultdata.Access_token)
                        localStorage.setItem('Refresh_token', data.resultdata.Refresh_token)
                        localStorage.setItem('UserId', data.resultdata.UserId)
                        setTimeout(function () {
                            window.location.href = '../guanyu.html'
                        }, 500)
                    }
                    $('#res-btn').removeAttr('disabled')
                },
                error: function (err) {
                    console.log(JSON.stringify(err))
                    $(this).prop('disabled', true);
                    $('#res-btn').removeAttr('disabled')
                }
            })
        })

        function textalert(text) {
            $('body,html').css('width', '100%').css('height', '100%');
            var dome =
                `<div style="text-align:center;position:absolute;top:50%;transform:translate(-50%,-50%);border-radius: 5px;background: rgba(0,0,0,0.5);padding: 0.2rem;left: 50%;z-index:9999999999999999999999999;" class="mask_boxcontent">
          <p style="color:#fff;">${text}</p>
        </div>`
            $('body').append(dome);
            setTimeout(function () {
                $('.mask_boxcontent').fadeOut(500);
                setTimeout(function () {
                    $('.mask_boxcontent').remove();
                }, 500)
            }, 2000)
        }
    </script>
</body>

</html>